
import React, { PureComponent } from 'react';
import store from "../../store/index"
import { addBookAction, addCountAction, addCountActionAsync } from '../../store/actions';

export default class index extends PureComponent {

    state={
        count:store.getState().count,
        books:store.getState().books
    }

    componentDidMount(){
        store.subscribe(()=>{
            this.setState({
                count:store.getState().count,
                books:store.getState().books
            })
        });
    }

    addCount=()=>{
        // store.dispatch(addCountAction(2));
        store.dispatch(addCountActionAsync());
    }

    addBook=()=>{
      store.dispatch(addBookAction({
        id:"01002",
        name:"十万个为什么"
      }))
    }

  render() {
    console.log("StoreDemo.render");
    return (
      <div>
        <h1>仓库的demo</h1>
        <p>count:{this.state.count}</p>
        <input type="button" value="count加法" onClick={this.addCount} />
        <hr/>
        <ul>
          {this.state.books.map(item=>(
            <li>
              <p>编号：{item.id}</p>
              <p>书名：{item.name}</p>
            </li>
          ))}
          <input type="button" value="添加一本书" onClick={this.addBook} />
        </ul>
      </div>
    )
  }
}
